fix(call): polish speaker view - #19216
Conversation
DorraJaouad
added
feature: frontend 🖌️
DorraJaouad
changed the title
Assisted-by: ClaudeCode:claude-opus-5 Signed-off-by: Dorra Jaouad <dorra.jaoued7@gmail.com>
The background of a tile was a translucent tint, so whatever the tile sat over - the promoted video, in a stripe - showed through it in full detail. Paint the shade that tint used to composite to instead, and drop the `background-image` reset left over with it: no rule sets an image here. Assisted-by: ClaudeCode:claude-opus-5 Signed-off-by: Dorra Jaouad <dorra.jaoued7@gmail.com>
The stripe took no surface of its own, so its tiles floated over the call background whether or not there was anything behind them. Give it a card with its leading corners rounded, which reads as being pulled up and pushed back down as the stripe expands and collapses. Assisted-by: ClaudeCode:claude-opus-5 Signed-off-by: Dorra Jaouad <dorra.jaoued7@gmail.com>
The promoted video covers the whole call view, the stripe floating over it, while a single participant fills the promoted area. A call nobody else has joined yet was left out, so the stripe sat on a card of its own for as long as it was the only thing on screen and dropped it the moment somebody joined. Lay an empty promoted area out the same way. Assisted-by: ClaudeCode:claude-opus-5 Signed-off-by: Dorra Jaouad <dorra.jaoued7@gmail.com>
`isOneToOne` counted the participants of the call to inset the promoted video by the padding of the wrapper, which is what the full page layout asks for. It names the call rather than the layout, and the two have since parted ways: a call nobody else has joined is laid out full page and is not one to one. Pass the layout itself. SpeakersGrid handed the flag to tiles that are never big, where the class it sets matches no rule, so it is dropped there. Assisted-by: ClaudeCode:claude-opus-5 Signed-off-by: Dorra Jaouad <dorra.jaoued7@gmail.com>
Signed-off-by: Dorra Jaouad <dorra.jaoued7@gmail.com>
bb19f47 to
fb58d55
Compare
Antreesy
left a comment
Antreesy
left a comment
There was a problem hiding this comment.
Tested, looks better. My only concern is new background color
| // capped, so the grid itself has to place them. A stripe holding | ||
| // a single tile keeps it at the inline end, where the tiles of a | ||
| // fuller stripe end as well, rather than in the middle. | ||
| justifyContent: this.isStripe && this.totalTiles === 1 ? 'end' : 'center', |
There was a problem hiding this comment.
This probably needs a guard for noLocalVideoReserve - so if it's three people, but your video will be hidden, don't shift a sole person in stripe to your place
There was a problem hiding this comment.
But then, one video will be centered in the middle which is an issue at the moment
There was a problem hiding this comment.
maybe put it to 'start', if it's not you?
| // left in a one to one call - are lifted off the call by a shadow instead | ||
| .overlap & :deep(.localVideoContainer), | ||
| .overlap & :deep(.video-container-grid) { | ||
| box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5); |
There was a problem hiding this comment.
Shadow is cropped at bottom, as it's larger than allowed area:
There was a problem hiding this comment.
Sharp eye, I check if it is harmless to add a few pixels down
| // The card the tiles sit on. It is pulled up out of the bottom of the call | ||
| // view and pushed back down when it collapses, so only the corners it leads | ||
| // with are rounded | ||
| .grid-main-wrapper:not(.overlap) & { |
There was a problem hiding this comment.
Bottom area feels weird/abrupt, as above and below stripe it's transparent:
Maybe there should be a divider, so a cut-off of video tiles from controls looks intended?
Even rounding up bottom corners feels better to me:
There was a problem hiding this comment.
I also agree, because the bottom bar shares the same color as the call view background so the card looks it coming out of nowhere
There was a problem hiding this comment.
I don't see the issue with not having a background at all. We are losing more pixel space if we add this and visually creating 2 "lines"between the main speaker and the rest of the participants. If we do want to have a background then I'd vote for a the rounded corners
There was a problem hiding this comment.
The reason we are adding the background is that we received frequent feedback that the control buttons are perceived as detached from the stripe when there is not full line of participants. I have added the background specifically for that reason so that is why I am reverting it back.
Maybe there is a better approach?
4 participants
☑️ Resolves
AI (if applicable)
🖌️ UI Checklist
🖼️ Screenshots / Screencasts
🏁 Checklist